<template>
  <el-table
    :data="resources"
    class="custom-table thead-bg-color"
    @row-click="rowClick"
    v-loading="loading"
  >
    <el-table-column label="资源名" :width="columnWidth.title">
      <div slot="header">
        <svg-icon icon-name="" />
        <span class="m-l-5">资源名</span>
      </div>
      <div class="flex align-items-center" slot-scope="{ row }">
        <el-image v-if="row.img" :src="uploadIcon(row.img)" class="s15" />
        <svg-icon v-else :icon-name="row.icon" class="shrink-0" />
        <div class="flex-1 m-l-5 flex flex-wrap" style="min-width: 0;">
          <el-tag
            v-if="row.good"
            size="mini"
            type="danger"
            disable-transitions
            class="m-r-5"
            v-text="'精'"
          />
          <router-link
            :to="row.path"
            @click.native="stopPropagation"
            :title="row.title"
            class="block link line1 m-r-10"
            :class="{ 'good-resource-text': row.good }"
            v-text="row.title"
          />
          <el-tag
            v-for="tag in row.tags"
            :key="tag"
            size="mini"
            disable-transitions
            v-text="tag"
          />
        </div>
      </div>
    </el-table-column>
    <el-table-column label="作者" :width="columnWidth.author">
      <div slot="header">
        <svg-icon icon-name="" />
        <span>作者</span>
      </div>
      <router-link
        slot-scope="{ row }"
        v-if="row.type === 'ProductSnippet' || row.type === 'ProductLocalFile'"
        :to="`/users/${row.author.id}`"
        @click.native="stopPropagation"
        target="_blank"
        class="line1 link"
      >
        <i class="el-icon-user"></i>
        {{ row.author.nickname }}
      </router-link>
    </el-table-column>
    <el-table-column v-if="belong" label="所属空间" :width="columnWidth.belong">
      <router-link
        slot-scope="{ row }"
        :to="`/spaces/${row.space.id}`"
        @click.native="stopPropagation"
        target="_blank"
        class="line1 link"
        v-text="row.space.title"
      />
    </el-table-column>
    <el-table-column
      v-if="manageMode"
      key="operate"
      label="操作"
      :width="columnWidth.operate"
      align="right"
    >
      <template slot-scope="{ row }" v-if="row.type && !row.back">
        <span
          v-if="row.type === 'ProductFolder'"
          class="link el-link--primary"
          @click.stop="renameFolder(row)"
          v-text="'重命名'"
        ></span>
        <span class="link el-link--success m-l-5" @click.stop="moveResource(row)">移动</span>
        <delete-link :delete-item="row" class="m-l-5" @deletedResource="deletedResource" />
      </template>
    </el-table-column>
    <el-table-column v-else key="timeago" label="更新时间" :width="columnWidth.timeago" align="right">
      <timeago2 slot-scope="{ row }" :date-time="row.updated_at" />
    </el-table-column>
    <select-folder-dialog
      :dialog-visible.sync="selectFolderDialogVisible"
      :space-id="Number($route.params.spaceId)"
      :move-resource="true"
      :move-resource-id="selectedResource.id"
      v-on:movedResource="operatedList"
    />
    <rename-folder-dialog
      :dialog-visible.sync="renameFolderDialogVisible"
      :space-id="Number($route.params.spaceId)"
      :folder="selectedResource"
      v-on:renamedFolder="operatedList"
    />
  </el-table>
</template>

<script>
import FileIconMixin from '@/utils/file-icon-mixin';
import SelectFolderDialog from '@/components/shared/select-folder-dialog';
import RenameFolderDialog from './rename-folder-dialog';
import DeleteLink from '../delete-link';

export default {
  name: 'ResourcesList',
  components: { DeleteLink, SelectFolderDialog, RenameFolderDialog },
  mixins: [FileIconMixin],
  props: {
    resources: {
      type: Array,
      required: true,
    },
    loading: Boolean,
    manageMode: Boolean,
    belong: Boolean,
  },
  data() {
    return {
      selectedResource: {},
      selectFolderDialogVisible: false,
      renameFolderDialogVisible: false,
    };
  },
  computed: {
    columnWidth() {
      const width = 960;
      const author = this.belong ? 120 : 140;
      const operate = this.belong ? 140 : 170;
      const timeago = operate; // timeago 和 operate 共用，同时只出现一个
      const belong = this.belong ? 170 : 0;
      const title = width - author - operate - belong;
      return {
        title: String(title),
        author: String(author),
        belong: String(belong),
        operate: String(operate),
        timeago: String(timeago),
      };
    },
  },
  methods: {
    rowClick(row) { this.$router.push(row.path); },
    renameFolder(row) {
      this.selectedResource = row;
      this.renameFolderDialogVisible = true;
    },
    moveResource(row) {
      this.selectedResource = row;
      this.selectFolderDialogVisible = true;
    },
    operatedList() { this.$emit('operatedList'); },
    renamedFolder(resource, folder) {
      this.resources.splice(this.resources.indexOf(resource), 1, folder);
    },
    deletedResource(row) { this.$emit('operatedList', row); },
  },
};
</script>

<style></style>
